<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/main.css">
    <title>mi.com</title>
</head>

<body>
    <header>
        <div>
            <a href="#">小米商城</a>
            <span class="division">|</span>
            <a href="#">MIUI</a>
            <span class="division">|</span>
            <a href="#">IoT</a>
            <span class="division">|</span>
            <a href="#">云服务</a>
            <span class="division">|</span>
            <a href="#">天星数科</a>
            <span class="division">|</span>
            <a href="#">有品</a>
            <span class="division">|</span>
            <a href="#">小爱开发平台</a>
            <span class="division">|</span>
            <a href="#">企业团购</a>
            <span class="division">|</span>
            <a href="#">资质证照</a>
            <span class="division">|</span>
            <a href="#">协议规定</a>
            <span class="division">|</span>
            <a href="#" class="download-app">下载app</a>
            <span class="division">|</span>
            <a href="#">智能生活</a>
            <span class="division">|</span>
            <a href="#" class="sl">Select Location</a>
            <a href="../html/login_register.html" class="login-status">登录</a>
            <span class="division">|</span>
            <a href="#">消息通知</a>
            <a href="#" class="shoppingCart">
                <span class="bi bi-cart"></span>&nbsp;&nbsp;购物车&nbsp;&nbsp;(0)
                <div class="shoppingAnim">
                    <span>您的购物车中没有商品，快去选购吧！</span>
                </div>
            </a>
        </div>
        <div class="QRdownload-app">
            <div class="QR-img">
                <img src="../imgs/QRApp.png" alt="">
                <div>小米商城APP</div>
            </div>
            <div class="corner"></div>
        </div>
    </header>
    <nav>
        <div>
            <a href="#"></a>
            <div class="nav_drawDown">
                <div class="as">
                    <a href="#" class="add">小米手机</a>
                    <a href="#" class="add">Redmi 红米</a>
                    <a href="#" class="add">电视</a>
                    <a href="#" class="add">笔记本</a>
                    <a href="#" class="add">平板</a>
                    <a href="#" class="add">家电</a>
                    <a href="#" class="add">路由器</a>
                    <a href="#" class="add">智能硬件</a>
                    <a href="#">服务</a>
                    <a href="#">社区</a>
                    <div class="add_list">
                        <span>
                            很抱歉，目前没有推荐
                        </span>
                    </div>
                </div>
                <form class="search" action="" method="get">
                    <input type="text" placeholder="小米11">
                    <button><span class="bi bi-search"></span></button>
                    <!-- <ul class="commodity_list">
                        <li>全部商品</li>
                        <li>小米11</li>
                        <li>红米k40</li>
                        <li>黑鲨4</li>
                        <li>小米10s</li>
                        <li>空调</li>
                        <li>电视</li>
                        <li>小米手机</li>
                    </ul> -->
                </form>

            </div>
        </div>
    </nav>
    <div class="rotation">
        <div class="gather_commodity">
            <ul>
                <li class="phone">
                    <span class="commodity_name">手机</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_phone.jpg" alt=""></a>
                                <span>Xiaomi&nbsp;Mix&nbsp;4</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">电视</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_tv6.jpg" alt=""></a>
                                <span>小米电视6&nbsp;至尊版</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">笔记本&nbsp;平板</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list mi_book">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_book.jpg" alt=""></a>
                                <span>小米平板5</span>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">家电</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/fridge.jpg" alt=""></a>
                                <span>冰箱</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">出行&nbsp;穿戴</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list mi_book">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/mi_bracelet.jpg" alt=""></a>
                                <span>小米手环6&nbsp;NFC版</span>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">智能&nbsp;路由器</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list mi_book">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/dog.jpg" alt=""></a>
                                <span>CyberDog</span>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">电源&nbsp;配件</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list mi_battery">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/portable.jpg" alt=""></a>
                                <span>移动电源</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">健康&nbsp;儿童</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list mi_book">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/wash_phone.jpg" alt=""></a>
                                <span>洗手机</span>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">耳机&nbsp;音响</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list mi_book">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/Redmi_AirDots.jpg" alt=""></a>
                                <span>Redmi&nbsp;AirDots</span>
                            </li>
                        </ul>

                    </div>
                </li>
                <li class="phone">
                    <span class="commodity_name">生活&nbsp;包箱</span>
                    <span class="bi bi-chevron-right"></span>
                    <div class="phone_list mi_book">
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                            <li>
                                <a href=""><img src="../imgs/small_bag.jpg" alt=""></a>
                                <span>小背包</span>
                            </li>
                        </ul>

                    </div>
                </li>
            </ul>
        </div>
        <div class="slideshow">
            <ul class="slideshow-imgs">
                <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bdf15226480346e3a8d83a1f0092074d.jpg?w=2452&h=920"
                        alt=""></li>
                <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1533&h=575&f=webp&q=90"
                        alt=""></li>
                <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
                        alt=""></li>
                <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34eeb3763ae19ab10de282b376f3e661.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
                        alt=""></li>
            </ul>
            <ul class="slideshow-dots">
                <a class="dot-active" number="1"></a>
                <a number="2"></a>
                <a number="3"></a>
                <a number="4"></a>
            </ul>
            <!-- <div class="slideshow-arrow">
                <div><span class="bi bi-chevron-left"></span></div>
                <div><span class="bi bi-chevron-right"></span></div>
            </div> -->
        </div>
    </div>
    <div class="recommend">
        <ul>
            <li>
                <ul class="server_sort">
                    <li>
                        <a href="">
                            <span class="bi bi-alarm"></span>
                            <p>保障服务</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="bi bi-building"></span>
                            <p>企业团购</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="bi bi-facebook"></span>
                            <p>F码通道</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="bi bi-sim"></span>
                            <p>米粉卡</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="bi bi-arrow-repeat"></span>
                            <p>以旧换新</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="bi bi-cash-coin"></span>
                            <p>话费充值</p>
                        </a>
                    </li>

                </ul>
            </li>
            <li><img src="../imgs/redmi9a.jpg" alt=""></li>
            <li><img src="../imgs/mi11.jpg" alt=""></li>
            <li><img src="../imgs/pro.png" alt=""></li>
        </ul>
    </div>
    <div class="middle">
        <div class="middlePhone">
            <div class="k40">
                <img src="../imgs/link_two.jpg" alt="">
            </div>
            <div class="hotPhone">
                <div class="Navi">
                    <span>手机</span>
                    <a href="">查看更多&nbsp;&nbsp;<span class="bi bi-arrow-right-circle-fill"></span></a>
                </div>
                <div class="individual">
                    <div class="indi_left">
                        <img src="../imgs/mixFold.jpg" alt="">
                    </div>
                    <div class="indi_right">
                        <ul class="add-phone">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="middle_others">
            <div class="Navi">
                <span class="title">家电</span>
                <!-- <span class="link_title"> -->
                <span class="changeHot">热门</span>
                <span class="changeTV">电视影音</span>
                <!-- </span> -->
                <div class="advertisementTV">
                    <div class="fixedAd">
                        <img src="../imgs/miTV6.jpg" alt="">
                        <img src="../imgs/miTV77.jpg" alt="">
                    </div>
                    <div class="animationAd">
                        <ul class="add-hp">

                        </ul>
                    </div>
                </div>
                <div class="advertisementHot">
                    <div class="fixedAd">
                        <img src="../imgs/miTV6.jpg" alt="">
                        <img src="../imgs/miTV77.jpg" alt="">
                    </div>
                    <div class="animationAd">
                        <ul>
                            <li class="team">
                                <img src="../imgs/fridge 540l.webp" alt="">
                                <h3>米家互联网对开门冰箱&nbsp;540L</h3>
                                <p>重磅新品福利特惠</p>
                                <p class="presentPrice">2999元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/fridge 540l.webp" alt="">
                                <h3>米家互联网对开门冰箱&nbsp;540L</h3>
                                <p>重磅新品福利特惠</p>
                                <p class="presentPrice">2999元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/fridge 540l.webp" alt="">
                                <h3>米家互联网对开门冰箱&nbsp;540L</h3>
                                <p>重磅新品福利特惠</p>
                                <p class="presentPrice">2999元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/fridge 540l.webp" alt="">
                                <h3>米家互联网对开门冰箱&nbsp;540L</h3>
                                <p>重磅新品福利特惠</p>
                                <p class="presentPrice">2999元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/fridge 540l.webp" alt="">
                                <h3>米家互联网对开门冰箱&nbsp;540L</h3>
                                <p>重磅新品福利特惠</p>
                                <p class="presentPrice">2999元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/fridge 540l.webp" alt="">
                                <h3>米家互联网对开门冰箱&nbsp;540L</h3>
                                <p>重磅新品福利特惠</p>
                                <p class="presentPrice">2999元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/fridge 540l.webp" alt="">
                                <h3>米家互联网对开门冰箱&nbsp;540L</h3>
                                <p>重磅新品福利特惠</p>
                                <p class="presentPrice">2999元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="ad_sort">
                                <div class="sortOne">
                                    <div class="ad_caption">
                                        <h3>米家互联网烟灶套装（天然气）</h3>
                                        <p class="presentPrice">1799元</p>
                                    </div>
                                    <div class="ad_img">
                                        <img src="../imgs/miStove.webp" alt="">
                                    </div>
                                </div>
                                <div class="sortTwo">
                                    <div class="ad_caption">
                                        <span>浏览更多</span>
                                        <span>热门</span>
                                    </div>
                                    <div class="ad_img">
                                        <span class="bi bi-arrow-right-circle-fill"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="stationPosition"></div>
        </div>
        <div class="middle_others">
            <div class="Navi">
                <span class="title">智能</span>
                <span class="changeHot">热门</span>
                <span class="changeProtect">安防</span>
                <span class="changeTV">出行</span>
                <div class="advertisementTV">
                    <div class="fixedAd">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/807f30dc8d3aafcaf4ce34d1556a6f5a.jpg?thumb=1&w=293&h=375&f=webp&q=90"
                            alt="">
                        <img src="../imgs/sound.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul class="add-smart">

                        </ul>
                    </div>
                </div>
                <div class="advertisementHot">
                    <div class="fixedAd">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/807f30dc8d3aafcaf4ce34d1556a6f5a.jpg?thumb=1&w=293&h=375&f=webp&q=90"
                            alt="">
                        <img src="../imgs/sound.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul>
                            <li class="team">
                                <img src="../imgs/samlSound.webp" alt="">
                                <h3>Xiaomi&nbsp;Sound</h3>
                                <p>小米高保真只能音响</p>
                                <p class="presentPrice">499元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/samlSound.webp" alt="">
                                <h3>Xiaomi&nbsp;Sound</h3>
                                <p>小米高保真只能音响</p>
                                <p class="presentPrice">499元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/samlSound.webp" alt="">
                                <h3>Xiaomi&nbsp;Sound</h3>
                                <p>小米高保真只能音响</p>
                                <p class="presentPrice">499元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/samlSound.webp" alt="">
                                <h3>Xiaomi&nbsp;Sound</h3>
                                <p>小米高保真只能音响</p>
                                <p class="presentPrice">499元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/samlSound.webp" alt="">
                                <h3>Xiaomi&nbsp;Sound</h3>
                                <p>小米高保真只能音响</p>
                                <p class="presentPrice">499元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/samlSound.webp" alt="">
                                <h3>Xiaomi&nbsp;Sound</h3>
                                <p>小米高保真只能音响</p>
                                <p class="presentPrice">499元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/samlSound.webp" alt="">
                                <h3>Xiaomi&nbsp;Sound</h3>
                                <p>小米高保真只能音响</p>
                                <p class="presentPrice">499元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="ad_sort">
                                <div class="sortOne">
                                    <div class="ad_caption">
                                        <h3>小米体脂秤2</h3>
                                        <p class="presentPrice">199元</p>
                                    </div>
                                    <div class="ad_img">
                                        <img src="../imgs/balance.webp" alt="">
                                    </div>
                                </div>
                                <div class="sortTwo">
                                    <div class="ad_caption">
                                        <span>浏览更多</span>
                                        <span>热门</span>
                                    </div>
                                    <div class="ad_img">
                                        <span class="bi bi-arrow-right-circle-fill"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="advertisementProtect">
                    <div class="fixedAd">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/807f30dc8d3aafcaf4ce34d1556a6f5a.jpg?thumb=1&w=293&h=375&f=webp&q=90"
                            alt="">
                        <img src="../imgs/sound.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul>
                            <li class="team">
                                <img src="../imgs/lock.webp" alt="">
                                <h3>小米全自动智能门锁</h3>
                                <p>高端全自动，一触即开们</p>
                                <p class="presentPrice">1799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/lock.webp" alt="">
                                <h3>小米全自动智能门锁</h3>
                                <p>高端全自动，一触即开们</p>
                                <p class="presentPrice">1799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/lock.webp" alt="">
                                <h3>小米全自动智能门锁</h3>
                                <p>高端全自动，一触即开们</p>
                                <p class="presentPrice">1799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/lock.webp" alt="">
                                <h3>小米全自动智能门锁</h3>
                                <p>高端全自动，一触即开们</p>
                                <p class="presentPrice">1799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/lock.webp" alt="">
                                <h3>小米全自动智能门锁</h3>
                                <p>高端全自动，一触即开们</p>
                                <p class="presentPrice">1799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/lock.webp" alt="">
                                <h3>小米全自动智能门锁</h3>
                                <p>高端全自动，一触即开们</p>
                                <p class="presentPrice">1799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/lock.webp" alt="">
                                <h3>小米全自动智能门锁</h3>
                                <p>高端全自动，一触即开们</p>
                                <p class="presentPrice">1799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="ad_sort">
                                <div class="sortOne">
                                    <div class="ad_caption">
                                        <h3>小米室外摄像机&nbsp;电池款</h3>
                                        <p class="presentPrice">399元</p>
                                    </div>
                                    <div class="ad_img">
                                        <img src="../imgs/camera.webp" alt="">
                                    </div>
                                </div>
                                <div class="sortTwo">
                                    <div class="ad_caption">
                                        <span>浏览更多</span>
                                        <span>安防</span>
                                    </div>
                                    <div class="ad_img">
                                        <span class="bi bi-arrow-right-circle-fill"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="stationPosition"></div>
        </div>
        <div class="middle_others">
            <div class="Navi">
                <span class="title">搭配</span>
                <!-- <span class="link_title"> -->
                <span class="changeHot">热门</span>
                <span class="changeTV">耳机音箱</span>
                <!-- </span> -->
                <div class="advertisementTV">
                    <div class="fixedAd">
                        <img src="../imgs/location1.webp" alt="">
                        <img src="../imgs/location2.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul class="add-match">

                        </ul>
                    </div>
                </div>
                <div class="advertisementHot">
                    <div class="fixedAd">
                        <img src="../imgs/location1.webp" alt="">
                        <img src="../imgs/location2.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul>
                            <li class="team">
                                <img src="../imgs/location3.webp" alt="">
                                <h3>小米降噪耳机&nbsp;Pro&nbsp;&nbsp;FlipBuds Pro</h3>
                                <p>主动降噪&nbsp;超长续航</p>
                                <p class="presentPrice">799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/location3.webp" alt="">
                                <h3>小米降噪耳机&nbsp;Pro&nbsp;&nbsp;FlipBuds Pro</h3>
                                <p>主动降噪&nbsp;超长续航</p>
                                <p class="presentPrice">799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/location3.webp" alt="">
                                <h3>小米降噪耳机&nbsp;Pro&nbsp;&nbsp;FlipBuds Pro</h3>
                                <p>主动降噪&nbsp;超长续航</p>
                                <p class="presentPrice">799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/location3.webp" alt="">
                                <h3>小米降噪耳机&nbsp;Pro&nbsp;&nbsp;FlipBuds Pro</h3>
                                <p>主动降噪&nbsp;超长续航</p>
                                <p class="presentPrice">799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/location3.webp" alt="">
                                <h3>小米降噪耳机&nbsp;Pro&nbsp;&nbsp;FlipBuds Pro</h3>
                                <p>主动降噪&nbsp;超长续航</p>
                                <p class="presentPrice">799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/location3.webp" alt="">
                                <h3>小米降噪耳机&nbsp;Pro&nbsp;&nbsp;FlipBuds Pro</h3>
                                <p>主动降噪&nbsp;超长续航</p>
                                <p class="presentPrice">799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/location3.webp" alt="">
                                <h3>小米降噪耳机&nbsp;Pro&nbsp;&nbsp;FlipBuds Pro</h3>
                                <p>主动降噪&nbsp;超长续航</p>
                                <p class="presentPrice">799元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="ad_sort">
                                <div class="sortOne">
                                    <div class="ad_caption">
                                        <h3>小米真无线蓝牙耳机Air&nbsp;2&nbsp;Pro</h3>
                                        <p class="presentPrice">449元</p>
                                    </div>
                                    <div class="ad_img">
                                        <img src="../imgs/location4.webp" alt="">
                                    </div>
                                </div>
                                <div class="sortTwo">
                                    <div class="ad_caption">
                                        <span>浏览更多</span>
                                        <span>热门</span>
                                    </div>
                                    <div class="ad_img">
                                        <span class="bi bi-arrow-right-circle-fill"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="stationPosition"></div>
        </div>
        <div class="middle_others">
            <div class="Navi">
                <span class="title">配件</span>
                <!-- <span class="link_title"> -->
                <span class="changeHot">热门</span>
                <span class="changeTV">充电器</span>
                <!-- </span> -->
                <div class="advertisementTV">
                    <div class="fixedAd">
                        <img src="../imgs/parts1.webp" alt="">
                        <img src="../imgs/parts2.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul class="add-parts">

                        </ul>
                    </div>
                </div>
                <div class="advertisementHot">
                    <div class="fixedAd">
                        <img src="../imgs/parts1.webp" alt="">
                        <img src="../imgs/parts2.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul>
                            <li class="team">
                                <img src="../imgs/parts3.webp" alt="">
                                <h3>告诉无线充电套装</h3>
                                <p>快速无线闪充&nbsp;Qi充电标准</p>
                                <p class="presentPrice">149元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/parts3.webp" alt="">
                                <h3>告诉无线充电套装</h3>
                                <p>快速无线闪充&nbsp;Qi充电标准</p>
                                <p class="presentPrice">149元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/parts3.webp" alt="">
                                <h3>告诉无线充电套装</h3>
                                <p>快速无线闪充&nbsp;Qi充电标准</p>
                                <p class="presentPrice">149元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/parts3.webp" alt="">
                                <h3>告诉无线充电套装</h3>
                                <p>快速无线闪充&nbsp;Qi充电标准</p>
                                <p class="presentPrice">149元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/parts3.webp" alt="">
                                <h3>告诉无线充电套装</h3>
                                <p>快速无线闪充&nbsp;Qi充电标准</p>
                                <p class="presentPrice">149元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/parts3.webp" alt="">
                                <h3>告诉无线充电套装</h3>
                                <p>快速无线闪充&nbsp;Qi充电标准</p>
                                <p class="presentPrice">149元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/parts3.webp" alt="">
                                <h3>告诉无线充电套装</h3>
                                <p>快速无线闪充&nbsp;Qi充电标准</p>
                                <p class="presentPrice">149元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="ad_sort">
                                <div class="sortOne">
                                    <div class="ad_caption">
                                        <h3>小米车载充电器快充版</h3>
                                        <p class="presentPrice">69元</p>
                                    </div>
                                    <div class="ad_img">
                                        <img src="../imgs/parts4.webp" alt="">
                                    </div>
                                </div>
                                <div class="sortTwo">
                                    <div class="ad_caption">
                                        <span>浏览更多</span>
                                        <span>热门</span>
                                    </div>
                                    <div class="ad_img">
                                        <span class="bi bi-arrow-right-circle-fill"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="stationPosition"></div>
        </div>
        <div class="middle_others">
            <div class="Navi">
                <span class="title">配件</span>
                <!-- <span class="link_title"> -->
                <span class="changeHot">热门</span>
                <span class="changeTV">出行</span>
                <!-- </span> -->
                <div class="advertisementTV">
                    <div class="fixedAd">
                        <img src="../imgs/border1.webp" alt="">
                        <img src="../imgs/border2.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul class="add-hot">
                        </ul>
                    </div>
                </div>
                <div class="advertisementHot">
                    <div class="fixedAd">
                        <img src="../imgs/border1.webp" alt="">
                        <img src="../imgs/border2.webp" alt="">
                    </div>
                    <div class="animationAd">
                        <ul>
                            <li class="team">
                                <img src="../imgs/border3.webp" alt="">
                                <h3>米家声波电动牙刷T300</h3>
                                <p>31000次/分钟震动，刷的干净</p>
                                <p class="presentPrice">99元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/border3.webp" alt="">
                                <h3>米家声波电动牙刷T300</h3>
                                <p>31000次/分钟震动，刷的干净</p>
                                <p class="presentPrice">99元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/border3.webp" alt="">
                                <h3>米家声波电动牙刷T300</h3>
                                <p>31000次/分钟震动，刷的干净</p>
                                <p class="presentPrice">99元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/border3.webp" alt="">
                                <h3>米家声波电动牙刷T300</h3>
                                <p>31000次/分钟震动，刷的干净</p>
                                <p class="presentPrice">99元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/border3.webp" alt="">
                                <h3>米家声波电动牙刷T300</h3>
                                <p>31000次/分钟震动，刷的干净</p>
                                <p class="presentPrice">99元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/border3.webp" alt="">
                                <h3>米家声波电动牙刷T300</h3>
                                <p>31000次/分钟震动，刷的干净</p>
                                <p class="presentPrice">99元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="team">
                                <img src="../imgs/border3.webp" alt="">
                                <h3>米家声波电动牙刷T300</h3>
                                <p>31000次/分钟震动，刷的干净</p>
                                <p class="presentPrice">99元 <span class="originPrice">3699元</span></p>
                            </li>
                            <li class="ad_sort">
                                <div class="sortOne">
                                    <div class="ad_caption">
                                        <h3>日常元素抽纸青春版&nbsp;24包/箱</h3>
                                        <p class="presentPrice">25.9元</p>
                                    </div>
                                    <div class="ad_img">
                                        <img src="../imgs/border4.webp" alt="">
                                    </div>
                                </div>
                                <div class="sortTwo">
                                    <div class="ad_caption">
                                        <span>浏览更多</span>
                                        <span>热门</span>
                                    </div>
                                    <div class="ad_img">
                                        <span class="bi bi-arrow-right-circle-fill"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="stationPosition"></div>
        </div>
        <div class="penAd">
            <img src="../imgs/miPen.webp" alt="">
        </div>
        <div class="video">
            <div class="Navi">
                <span>视频</span>
                <a href="">查看更多&nbsp;&nbsp;<span class="bi bi-arrow-right-circle-fill"></span></a>
            </div>
            <div class="videoLink">
                <ul>
                    <li>
                        <div class="videoImg">
                            <span class="bi bi-play-circle-fill"></span>
                        </div>
                        <div class="videoCaption">2021春季新品发布会第一场</div>
                    </li>
                    <li>
                        <div class="videoImg">
                            <span class="bi bi-play-circle-fill"></span>
                        </div>
                        <div class="videoCaption">Redmi&nbsp;10X系列发布会</div>
                    </li>
                    <li>
                        <div class="videoImg">
                            <span class="bi bi-play-circle-fill"></span>
                        </div>
                        <div class="videoCaption">小米10&nbsp;青春版&nbsp;发布会</div>
                    </li>
                    <li>
                        <div class="videoImg">
                            <span class="bi bi-play-circle-fill"></span>
                        </div>
                        <div class="videoCaption">小米10&nbsp;8K手机拍大片</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <div class="footerServer">
            <ul>
                <li>
                    <span class="bi bi-wrench"></span>
                    <span>预约维修服务</span>
                </li>
                <li>
                    <span class="bi bi-arrow-counterclockwise"></span>
                    <span>7天无理由退货</span>
                </li>
                <li>
                    <span class="bi bi-bootstrap-reboot"></span>
                    <span>15天免费换货</span>
                </li>
                <li>
                    <span class="bi bi-gift"></span>
                    <span>满69包邮</span>
                </li>
                <li>
                    <span class="bi bi-geo-alt"></span>
                    <span>520余家售后网点</span>
                </li>
            </ul>
        </div>
        <div class="sortServer">
            <div class="sortServerLeft">
                <dl>
                    <dt>帮助中心</dt>
                    <dd>账户管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd>售后政策</dd>
                    <dd>自助服务</dd>
                    <dd>相关下载</dd>
                </dl>
                <dl>
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店</dd>
                </dl>
                <dl>
                    <dt>关于小米</dt>
                    <dd>了解小米</dd>
                    <dd>加入小米</dd>
                    <dd>投资者关系</dd>
                    <dd>企业社会责任</dd>
                    <dd>廉洁举报</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                    <dd>公益基金会</dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd>F码通道</dd>
                    <dd>礼物码</dd>
                    <dd>防伪查询</dd>
                </dl>
            </div>
            <div class="sortServerRight">
                <p>400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <div class="service"><span class="bi bi-chat-left-dots-fill"></span><span>人工客服</span></div>
                <div>关注小米：
                    <a href="https://weibo.com/xiaomishangcheng" target="_blank" class="wb"></a>
                    <a href="javascript:void(0);" id="J_followWx" class="wx"></a>
                </div>
            </div>
        </div>
    </footer>
    <div class="company-information">
        <div class="ci-container">
            <div class="ci-logo">
                <div class="bg"></div>
            </div>
            <div class="ci-information">
                <p class="sites"><a rel="nofollow" href="//www.mi.com/index.html" target="_blank">小米商城</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//home.mi.com/index.html" target="_blank">米家</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.miliao.com/" target="_blank">米聊</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.duokan.com/" target="_blank">多看</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//game.xiaomi.com/" target="_blank">游戏</a> <span
                        class="sep">|</span> <a rel="nofollow"
                        href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358" target="_blank">政企服务</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//privacy.mi.com/all/zh_CN/"
                        target="_blank">小米集团隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html" target="_blank">小米公司儿童信息保护规则</a>
                    <span class="sep">|</span> <a rel="nofollow"
                        href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded8d0e4a77d.html" target="_blank">小米商城隐私政策</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.mi.com/about/user-agreement/"
                        target="_blank">小米商城用户协议</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//static.mi.com/feedback/" target="_blank">问题反馈</a> <span class="sep">|</span> <a
                        rel="nofollow" href="javascript:void(0);" class="J_siteGlobalRegion">Select Location</a>
                </p>
                <p class="sites"><a rel="nofollow" href="http://www.mi.com/beihu" target="_blank">北京互联网法院法律服务工作站</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.cca.org.cn/"
                        target="_blank">中国消费者协会</a> <span class="sep">|</span> <a rel="nofollow"
                        href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
                </p>
                <p class="others-sites">
                    ©
                    <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a> <a
                        rel="nofollow"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                        target="_blank">京公网安备11010802020134号</a> <a href="//www.mi.com/culture-license/"
                        target="_blank">京网文[2020]0276-042号</a> <br> <a href="//www.mi.com/medical/record/"
                        target="_blank">（京）网械平台备字（2018）第00005号</a> <a href="//www.mi.com/medical/qualification/"
                        target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/"
                        target="_blank">营业执照</a> <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a> <br>
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png"
                        target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png"
                        target="_blank">食品经营许可证</a> <br>
                    违法和不良信息举报电话：171-5104-4404&nbsp;<a href="https://www.mi.com/intellectual"
                        target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
                <div class="info-links"><a rel="nofollow"
                        href="https://privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
                        target="_blank"><img rel="nofollow" src="https://i1.mifile.cn/f/i/17/site/truste.png"
                            alt="TRUSTe Privacy Certification"></a> <a rel="nofollow"
                        href="https://search.szfw.org/cert/l/CX20120926001783002010" target="_blank"><img rel="nofollow"
                            src="https://s01.mifile.cn/i/v-logo-2.png" alt="诚信网站"></a> <a
                        id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow"
                        href="https://xyt.xinchacha.com/pcinfo?sn=523009637759455232&amp;certType=6"
                        target="_blank"><img rel="nofollow" src="https://xyt.xinchacha.com/img/icon/icon3.png"
                            alt="可信网站"></a> <a rel="nofollow" href="https://www.mi.com/service/buy/commitment/"
                        target="_blank"><img rel="nofollow"
                            src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                            alt="诚信经营 放心消费"></a><a rel="nofollow"
                        href="https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb"
                        class="safe-auth J_safeAuth                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              "><img
                            rel="nofollow"
                            src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png"
                            class="img1"><img rel="nofollow"
                            src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/e0bcab4f6fe52444d56e4d05997d521a.png"
                            class="img2"></a></div>
            </div>
        </div>
    </div>
    <aside>
        <div class="tag">
            <ul>
                <li class="phone-app">
                    <div class="bi bi-phone"></div>
                    <span>手机APP</span>
                </li>
                <li>
                    <div class="bi bi-person"></div>
                    <span>个人中心</span>
                </li>
                <li>
                    <div class="bi bi-wrench"></div>
                    <span>售后服务</span>
                </li>
                <li>
                    <div class="bi bi-headset"></div>
                    <span>人工服务</span>
                </li>
                <li class="jump-spc">
                    <div class="bi bi-cart2"></div>
                    <span>购物车</span>
                </li>
                <li class="call-top">
                    <div class="bi bi-chevron-bar-up"></div>
                    <span>回顶部</span>
                </li>
            </ul>
            <div class="aside-QRdownload-app">
                <div class="QR-img">
                    <img src="../imgs/QRApp.png" alt="">
                    <div>
                        <p>扫码领取新</p>
                        <p>人百元礼包</p>
                    </div>
                </div>
                <div class="corner"></div>
            </div>
        </div>
    </aside>
</body>
<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/general.js"></script>
<script src="../js/main.js"></script>
<script>
    $(".jump-spc").click(function () {
        // window.location = "./shopping_car.html";
        window.open("./shopping_car.html");
    });
    let cookieStr = document.cookie;
    let reg = /(userName)/g;
    let cookieResult = cookieStr.split("; ");
    let userName;
    for (let i = 0; i < cookieResult.length; i++) {
        let key = cookieResult[i].split("=")[0];
        let value = cookieResult[i].split("=")[1];
        if (key == "userName") {
            userName = value;
        }
    }
    if (reg.test(cookieStr)) {
        $(".login-status").text(`欢迎你：${userName}`);
    }
    $.ajax({
        type: "GET",
        url: "../php/shopping_car.php",
        data: `userName=${userName}`,
        success: function (msg) {
            let number = JSON.parse(msg).length;
            if (number > 0) {
                let ele = `
                <span class="bi bi-cart"></span>&nbsp;&nbsp;购物车&nbsp;&nbsp;(${number})
                <div class="shoppingAnim">
                    <span>您的购物车中有${number}件商品，快去看看吧！</span>
                </div>
                `;
                $(".shoppingCart").html(ele);
            } else {
                let ele = `
                <span class="bi bi-cart"></span>&nbsp;&nbsp;购物车&nbsp;&nbsp;(0)
                <div class="shoppingAnim">
                    <span>您的购物车中没有商品，快去选购吧！</span>
                </div>
                `;
                $(".shoppingCart").html(ele);
            }
        }
    });
    $.ajax({
        type: "POST",
        url: "../php/main.php",
        data: "",
        success: function (data) {
            data = JSON.parse(data);
            let goodsParms = [
                { "ele": "hp", "more": "电视影音" },
                { "ele": "smart", "more": "出行" },
                { "ele": "match", "more": "耳机音响" },
                { "ele": "parts", "more": "充电器" },
                { "ele": "hot", "more": "热门" },
            ]
            //将后端返回的数据分组
            function classify() {
                let sort = [[], [], [], [], [], []];
                for (let i = 1; i <= 6; i++) {
                    for (let j = 0; j < data.length; j++) {
                        if (data[j]["title"] == i) {
                            sort[i - 1].push(data[j]);
                        }

                    }
                }
                return sort;
            }
            fillGoods(goodsParms);
            function fillGoods(goodsData) {
                let sort = classify();
                for (let i = 0; i < 6; i++) {
                    //填充手机
                    if (i == 0) {
                        for (let j = 0; j < 8; j++) {
                            let ele = `
                                <li data-id="${sort[i][j]["goods_id"]}" class="jump-detail">
                                    <img src="${sort[i][j]["img"]}" alt="">
                                    <h3>${sort[i][j]["goods_title"]}</h3>
                                    <p>${sort[i][j]["goods_caption"]}</p>
                                    <p>${sort[i][j]["price"]}元起</p>
                                </li>
                            `;
                            $(".add-phone").append(ele);
                        }
                    } else {
                        //填充其他
                        for (let j = 0; j < 8; j++) {
                            if (j < 7) {
                                let ele = `
                                    <li class="team jump-detail" data-id="${sort[i][j]["goods_id"]}">
                                        <img src="${sort[i][j]["img"]}" alt="">
                                        <h3>${sort[i][j]["goods_title"]}</h3>
                                        <p>${sort[i][j]["goods_caption"]}</p>
                                        <p class="presentPrice">${sort[i][j]["price"]}元</p>
                                    </li>
                                `;
                                $(".add-" + goodsData[i - 1]["ele"] + "").append(ele);
                            }
                            if (j == 7) {
                                let lastEle = `
                                            <li class="ad_sort">
                                                <div class="sortOne jump-detail" data-id="${sort[i][j]["goods_id"]}">
                                                    <div class="ad_caption">
                                                        <h3>${sort[i][j]["goods_title"]}</h3>
                                                        <p class="presentPrice">${sort[i][j]["price"]}元</p>
                                                    </div>
                                                    <div class="ad_img">
                                                        <img src="${sort[i][j]["img"]}" alt="">
                                                    </div>
                                                </div>
                                                <div class="sortTwo">
                                                    <div class="ad_caption">
                                                        <span>浏览更多</span>
                                                        <span>${goodsData[i - 1]["more"]}</span>
                                                    </div>
                                                    <div class="ad_img">
                                                        <span class="bi bi-arrow-right-circle-fill"></span>
                                                    </div>
                                                </div>
                                            </li>
                                            `;
                                $(".add-" + goodsData[i - 1]["ele"] + "").append(lastEle);
                            }
                        }
                    }
                }
            }

        }
    });
    //跳转页面传送id值
    $("body").on("click", ".jump-detail", function () {
        let goodsId = $(this).attr("data-id");
        // window.location = "./detail.html?goodsId=" + goodsId;
        window.open("./detail.html?goodsId=" + goodsId);
    });
</script>

</html>